<template>
	<div class="quanzibox">
		<h3>热门圈子</h3>
		<ul>
			<li>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
			</li>
			<li>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/qiudui.png" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
			</li>
			<li>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/2.jpg" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/2.jpg" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
				<div class="teamlist">
					<a href="">
						<span class="team_img">
							<img src="../public/img/2.jpg" alt="">
						</span>
						<h4 class="team_name">天下足球</h4>
						<span class="fensi">粉丝999</span>
					</a>
					<div class="mask"></div>
				</div>
			</li>
		</ul>
		<div class="teamlist-bottom">
			<a href="" class="more">查看更多 <span class="el-icon-arrow-right"></span></a>
		</div>
	</div>
</template>

<script>
</script>

<style lang="scss" scoped>
	body,ul,li,p,h1,h2,h3,h4,h5,ol{
		padding: 0;
		margin: 0;
	}
	a{
		text-decoration: none;
	}
	ul,li{
		list-style: none;
	}
	.quanzibox{
		width: 320px;
		padding:20px 20px;
		background: #fff;
		h3{
			font-weight: normal;
			font-size: 16px;
			padding-bottom: 15px;
			border-bottom:1px solid #f5f5f5; 
		}
		ul>li{
			position: relative;
			display: flex;
			justify-content: space-around;
			margin-bottom: 10px;
			.teamlist{
				width: 86px;
				position: relative;
				margin:0 5px;
				text-align: center;
				.team_img{
					display: inline-block;
					width: 52px;
					height: 52px;
					img{
						width: 100%;
						height: auto;
						border-radius: 100%;
					}
				}
				.team_name{
					font-size: 12px;
					color: #333;
				}
				.fensi{
					color: #999;
					font-size: 12px;
				}
			}
			.teamlist:hover .mask{
				display: block;
			
			}
			.mask{
				display: none;
				position: absolute;
				top: 0px;
				left: 17px;
				width: 52px;
				height: 52px;
				background: rgba(0,0,0,0.4);
				border-radius: 50%;
			}
			
		}
		.teamlist-bottom{
			width: 100%;
			height: 40px;
			padding-top: 20px;
			border-top:1px solid #ccc; 
			text-align: center;
			line-height: 40px;
			color: #999;
		}
		.more{
			position: relative;
			display: block;
			color: #999;
		}
		
	}
</style>
